<template>
  <view>
    <ContainerTemplate
      class="default-container-service"
      v-bind="containerProps"
      v-model:isShowContainer="containerProps.isShowContainer"
      @do-operation="onContainerOperation"
    ></ContainerTemplate>
    <ContainerTemplate
      v-for="item in multiInstanceContainerKeys"
      :key="item"
      :class="item"
      v-bind="multiInstanceContainerProps[item]"
      v-model:isShowContainer="
        multiInstanceContainerProps[item].isShowContainer
      "
      @do-operation="getOnMultiInstanceContainerOperation(item)"
    ></ContainerTemplate>
  </view>
</template>
<script setup>
import { computed, watch } from "vue";
import gdContainerService, {
  setContainerProps,
  toggleShowContainer,
  multiInstanceContainerProps,
  multiInstanceContainerKeys
} from "./gd-container-service";

import ContainerTemplate from "./container-template.vue";
const containerProps = gdContainerService();
const onContainerOperation = computed(() => {
  return (
    containerProps.value?.onDoOperation ?? (({ eventFrom, ...params }) => {})
  );
});
const getOnMultiInstanceContainerOperation = (key) =>
  multiInstanceContainerProps.value[key]?.onDoOperation ??
  (({ eventFrom, ...params }) => {});
defineExpose({
  setContainerProps,
  toggleShowContainer,
});
</script>
